<template>
	<view class="addSq">
		<!-- 		<view class="pageTitle">
			<text>新增授权</text>
		</view> -->
		<view class="main">
			<view class="title">
				<view class="tm">请选择</view>
				<view class="search" @click="toggle('bottom')">筛选</view>
			</view>
			<uni-popup ref="popup" type="bottom">
				<view class="conSearch">
					<view class="cxTitle">
						<view class="cxMc">租赁信息查询</view>
						<uni-icons type="closeempty" @click="closeToggle()"></uni-icons>
					</view>
					<view class="xzItem">
						<view class="name">地区</view>
						<view class="con">
							<view>
								<text
									v-if="cityArr.length>0">{{cityArr[0].label}}/{{cityArr[1].label}}/{{cityArr[2].label}}
								</text>
							</view>
							<pickerXzq @bindPickerChange="xzqPickerChange" :mrIndex="cityArr[3]" @getJwh="getJwh"
								:openGetJwh="true"></pickerXzq>
						</view>
					</view>
					<view class="xzItem">
						<view class="name">居委</view>
						<view class="con">
							<view>{{jwh.jwhmc}}</view>
							<pickerZdy :listArray="jwhArr" @pickerChange="jwhChange" label="jwhmc"></pickerZdy>
						</view>
					</view>
					<view class="xzItem">
						<view class="name">房屋地址</view>
						<view class="con">
							<input type="text" v-model="address" style="width: 100%;" placeholder="请输入房源地址" />
						</view>
					</view>
				</view>
				<view class="czbtn">
					<button type="primary" class="qrbtn" size="mini" @click="handleSearch('cxBtn')">确定</button>
					<button type="default" plain="true" class="qrbtn" size="mini" @click="handleReset">重置</button>
				</view>
			</uni-popup>
			<view class="box" v-for="(item,index) in zlxxArr" :index="index">
				<radio-group @change="radioChange">
					<view class="item xzk">
						<view>
							<radio :value="String(index)" :checked="index==current"></radio>
						</view>
						<view>{{item.address}}</view>
					</view>
					<view class="item">
						<view class="name">租赁编号</view>
						<view class="val">{{item.rentCode}}</view>
					</view>
					<view class="item">
						<view class="name">出租起止日期</view>
						<view class="val" v-if="item.startDate">
							{{item.startDate.slice(0,10)}}至{{item.endDate.slice(0,10)}}
						</view>
					</view>
					<view class="item">
						<view class="name">承租人</view>
						<view class="val">{{item.czrmc}} ({{item.czrzjhm}})</view>
					</view>
				</radio-group>
			</view>
			<view class="zwsj" v-if="zlxxArr.length==0">
				暂无数据
			</view>
			<view class="btn gddw">
				<button type="primary" class="qrbtn" size="mini" @click="zlxzQrBtn">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	import pickerZdy from "@/components/pickerZdy.vue"
	import pickerXzq from "@/components/pickerXzq.vue"
	import {
		pageZlxx
	} from "@/utils/common-api.js"
	import commonTools from "@/utils/common-tools.js"
	export default {
		name: "addSq",
		data() {
			let xzh = commonTools.getXzq()
			return {
				userInfo: commonTools.getUserInfo() || {},
				sjXzqhszDm: xzh.xzqhszDm,
				// 查询数据
				address: "",
				jwh: "",
				cityArr: [],
				jwhArr: [],
				zlxxArr: [],
				paramsVal: {},
				xzZlData: "",
				current: -1,
				page: {
					total: 0,
					pageIndex: 1,
					pageSize: 10,
				},
			};
		},
		components: {
			pickerZdy,
			pickerXzq
		},
		onLoad(e) {
			this.paramsVal = JSON.parse(e.data)
			console.log(this.paramsVal)
		},
		onShow() {
			this.handleSearch("onShow")
		},
		onReachBottom() {
			this.handleSearchEnd()
		},
		methods: {
			// 触底请求
			handleSearchEnd() {
				if (this.page.pageIndex * this.page.pageSize < this.page.total) {
					this.page.pageIndex = this.page.pageIndex + 1
					this.handleSearch()
				}
			},
			// 数据查询
			async handleSearch(val) {
				// 重新进入页面、根据筛选条件查询数据重置
				if (val == "cxBtn" || val == "onShow") {
					this.zlxxArr = []
					this.current = -1
					this.xzZlData = ""
					this.page = {
						total: 0,
						pageIndex: 1,
						pageSize: 10,
					}
				}

				let xzq = this.getXzqDm()
				let params = {
					nsrlx: this.paramsVal.nsrlx,
					sjXzqhszDm: xzq.sjXzqhszDm,
					qjXzqhszDm: xzq.qjXzqhszDm,
					jdxzDm: xzq.jdxzDm,
					jwhDm: this.jwh ? this.jwh.jwhDm : "",
					address: this.address,
					...this.page
				}

				let res = await pageZlxx(params)
				if (res.body && res.head.errorCode == "0") {
					this.zlxxArr = this.zlxxArr.concat(res.body.data)
					this.page.total = res.body.pager.recordCount
					if (val == "cxBtn" || val == "onShow") {
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 0
						})
						this.closeToggle()
					}
				} else if (res.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			// 筛选条件重置
			handleReset() {
				this.cityArr = []
				this.jwhArr = []
				this.jwh = ""
				this.address = ""
				this.handleSearch("cxBtn")
			},
			// 筛选（底部弹出框）
			toggle(type) {
				this.$refs.popup.open(type)
			},
			// 地区筛选
			xzqPickerChange(val) {
				this.cityArr = val
			},
			// 获取地区（行政区）代码
			getXzqDm() {
				let sjXzqhszDm = this.sjXzqhszDm
				let qjXzqhszDm = ""
				let jdxzDm = ""
				if (this.cityArr.length > 1) {
					sjXzqhszDm = this.cityArr[0].dm
					qjXzqhszDm = this.cityArr[1].dm
					jdxzDm = this.cityArr[2].dm
				}
				return {
					sjXzqhszDm,
					qjXzqhszDm,
					jdxzDm
				}
			},
			// 获取居委
			getJwh(val) {
				this.jwhArr = val
				this.jwh = ""
			},
			// 居委修改
			jwhChange(val) {
				this.jwh = this.jwhArr[val]
			},
			// 筛选关闭（底部弹出框）
			closeToggle(type) {
				this.$refs.popup.close("bottom")
			},
			// 单选框
			radioChange(val) {
				this.current = val.detail.value
				this.xzZlData = this.zlxxArr[this.current]
			},
			// 确认
			zlxzQrBtn() {
				if (!this.xzZlData) {
					uni.showToast({
						title: '请选择租赁信息',
						icon: 'error',
						duration: 1000
					});
					return
				}
				let params = {
					nsrlx: this.paramsVal.nsrlx,
					...this.xzZlData
				}
				uni.navigateTo({
					url: "/pages/dkfpsq/sqxxQr?data=" + JSON.stringify(params)
				})
			},
		}
	}
</script>

<style>
	.main {
		width: calc(100% - 40rpx);
		padding: 20rpx 20rpx 70rpx 20rpx;
		min-height: 100vh;
	}

	.item {
		display: flex;
		font-size: 26rpx;
		background-color: #ffffff;
		font-weight: bold;
		padding: 20rpx;
		word-break: break-all;
	}

	.item>.name {
		text-align: left;
		width: 160rpx;
		margin-right: 20rpx;
		color: #66666699;
	}

	.item>.val {
		text-align: left;

	}

	.xzk {
		font-size: 32rpx;
	}

	.box {
		margin: 30rpx 0;
		border-radius: 10rpx;
		overflow: hidden;
		border: 1px solid #0000006b;
	}

	.title {
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0 5rpx 0;
		align-items: center;
		font-weight: bold;
	}

	.title>.search {
		color: #3d8fff;
		font-size: 26rpx;
	}

	.btn,
	.czbtn {
		text-align: center;
		width: 100%;
		padding: 10rpx 0 0 0;
		background-color: #ffffff;
	}

	.gddw {
		position: fixed;
		bottom: 0;
		transform: translateX(50%);
		right: 50%;
		background-color: #0000001c;
	}




	.btn uni-button {
		width: 590rpx;
		height: 70rpx;
		line-height: 70rpx;

	}

	.czbtn uni-button {
		width: 250rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 0 20rpx;

	}

	.conSearch {
		background: #ffffff;
		min-height: 30vh;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		padding: 20rpx;
	}

	.conSearch>.cxTitle {
		font-size: 30rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
	}

	.conSearch>.xzItem {
		padding: 20rpx;
		font-size: 26rpx;
	}

	.xzItem>.con {
		padding: 20rpx 0;
		font-size: 30rpx;
		border-bottom: 2rpx solid #0000001a;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
</style>